import defaultSettings from '@/settings';
import { SidebarLightThemeEnum, ThemeEnum, type LayoutEnum } from '@/enums';
import {
  generateThemeColors,
  applyTheme,
  toggleDarkMode,
  toggleLightModeSidebarColorScheme,
  toggleGrayMode,
  toggleInvertMode,
  applySidebarWidth,
  applyTagsViewHeight,
  applyBorderRadius,
  applyTextEnhance,
} from '@/core/utils/theme';

type SettingsValue = boolean | number | string | string[];

export const useSettingsStore = defineStore('setting', () => {
  // 基本设置
  const settingsVisible = ref(false);
  // 标签页
  const tagsView = useStorage<boolean>('tagsView', defaultSettings.tagsView);
  const tagsViewDraggable = useStorage<boolean>('tagsViewDraggable', defaultSettings.tagsViewDraggable);
  const tagsViewCloseByMouseWheel = useStorage<boolean>(
    'tagsViewCloseByMouseWheel',
    defaultSettings.tagsViewCloseByMouseWheel
  );
  const tagsViewScrollByMouseWheel = useStorage<boolean>(
    'tagsViewScrollByMouseWheel',
    defaultSettings.tagsViewScrollByMouseWheel
  );
  const tagsViewChromeStyle = useStorage<boolean>('tagsViewChromeStyle', defaultSettings.tagsViewChromeStyle);
  const tagsViewIcon = useStorage<boolean>('tagsViewIcon', defaultSettings.tagsViewIcon);
  const tagsViewInNavbar = useStorage<boolean>('tagsViewInNavbar', defaultSettings.tagsViewInNavbar);
  // 导航栏其它设置
  const navbarOtherSettings = useStorage<boolean>('navbarOtherSettings', defaultSettings.navbarOtherSettings);
  // 侧边栏宽 Logo
  const sidebarWidth = useStorage<number>('sidebarWidth', defaultSettings.sidebarWidth);
  const sidebarLogo = useStorage<boolean>('sidebarLogo', defaultSettings.sidebarLogo);
  // 圆润风格
  const borderRadius = useStorage<number>('borderRadius', defaultSettings.borderRadius);
  // 布局 主题
  const layout = useStorage<LayoutEnum>('layout', defaultSettings.layout as LayoutEnum);
  const themeColor = useStorage<string>('themeColor', defaultSettings.themeColor);
  const theme = useStorage<ThemeEnum>('theme', defaultSettings.theme as ThemeEnum);

  const textEnhance = useStorage<boolean>('textEnhance', defaultSettings.textEnhance);
  // 浅色主题下的侧边栏配色方案 (白色/深蓝色)
  const sidebarColorScheme = useStorage<string>('sidebarColorScheme', defaultSettings.sidebarColorScheme);

  // 水印
  const watermarkEnabled = useStorage<boolean>('watermarkEnabled', defaultSettings.watermarkEnabled);
  const watermarkContent = useStorage<string[]>('watermarkContent', defaultSettings.watermarkContent);

  // 灰色模式、反色模式
  const grayMode = useStorage<boolean>('grayMode', defaultSettings.grayMode);
  const invertMode = useStorage<boolean>('invertMode', defaultSettings.invertMode);

  // 面包屑
  const showBreadcrumb = useStorage<boolean>('showBreadcrumb', defaultSettings.showBreadcrumb);
  const showBreadcrumbIcon = useStorage<boolean>('showBreadcrumbIcon', defaultSettings.showBreadcrumbIcon);
  const showHomeBreadcrumb = useStorage<boolean>('showHomeBreadcrumb', defaultSettings.showHomeBreadcrumb);

  // 跟随系统
  const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
  // 深色模式
  const isDark = computed(() => {
    return theme.value === ThemeEnum.AUTO ? mediaQueryList.matches : theme.value === ThemeEnum.DARK;
  });
  const changeThemeAuto = () => {
    if (theme.value === ThemeEnum.AUTO) {
      const newTheme = mediaQueryList.matches ? ThemeEnum.DARK : ThemeEnum.LIGHT;
      // 在 change 时间中触发一次 watch ，以便在监听 theme 的 computed 能正常触发，例如修改水印文字颜色
      theme.value = newTheme;
      theme.value = ThemeEnum.AUTO;
      toggleDarkMode(newTheme === ThemeEnum.DARK);
      const colors = generateThemeColors(themeColor.value, newTheme);
      applyTheme(colors);
    }
  };
  mediaQueryList.addEventListener('change', changeThemeAuto);
  //  监听主题变化
  watch(
    [theme, themeColor],
    ([newTheme, newThemeColor]) => {
      if (newTheme === ThemeEnum.AUTO) {
        changeThemeAuto();
      } else {
        toggleDarkMode(newTheme === ThemeEnum.DARK);
        const colors = generateThemeColors(newThemeColor, newTheme);
        applyTheme(colors);
      }
    },
    { immediate: true }
  );

  //  监听浅色侧边栏配色方案变化
  watch(
    sidebarColorScheme,
    (newSidebarColorScheme) => {
      toggleLightModeSidebarColorScheme(newSidebarColorScheme === SidebarLightThemeEnum.DARKBLUE);
    },
    { immediate: true }
  );

  // 监听标签栏显示隐藏，修改标签栏 css 变量，方便计算高度
  watch(
    [tagsView, tagsViewInNavbar],
    ([newTagsView, newTagsViewInNavbar]) => {
      if (newTagsViewInNavbar) {
        applyTagsViewHeight(newTagsViewInNavbar);
      } else {
        applyTagsViewHeight(newTagsView);
      }
    },
    { immediate: true }
  );
  // 监听侧边栏宽度变化
  watch(
    sidebarWidth,
    (newSidebarWidth) => {
      applySidebarWidth(newSidebarWidth);
    },
    { immediate: true }
  );
  // 监听侧边栏宽度变化
  watch(
    textEnhance,
    (newTextEnhance) => {
      applyTextEnhance(newTextEnhance);
    },
    { immediate: true }
  );

  // 监听文本增强
  watch(
    borderRadius,
    (newBorderRadius) => {
      applyBorderRadius(newBorderRadius);
    },
    { immediate: true }
  );

  // 监听灰色模式变化
  watch(
    grayMode,
    (newGrayMode) => {
      toggleGrayMode(newGrayMode);
    },
    { immediate: true }
  );
  // 监听反色模式变化
  watch(
    invertMode,
    (newInvertMode) => {
      toggleInvertMode(newInvertMode);
    },
    { immediate: true }
  );

  // 设置映射
  const settingsMap: Record<string, Ref<SettingsValue>> = {
    tagsView,
    sidebarWidth,
    sidebarLogo,
    layout,
    watermarkEnabled,
    watermarkContent,
    sidebarColorScheme,
    grayMode,
    invertMode,
    showHomeBreadcrumb,
  };

  function changeSidebarColorScheme(val: string) {
    sidebarColorScheme.value = val;
  }

  function changeSetting({ key, value }: { key: string; value: SettingsValue }) {
    const setting = settingsMap[key];
    if (setting) setting.value = value;
  }

  function changeTheme(val: ThemeEnum) {
    theme.value = val;
  }

  function changeThemeColor(color: string) {
    themeColor.value = color;
  }

  function changeLayout(val: LayoutEnum) {
    layout.value = val;
  }

  return {
    settingsVisible,
    tagsView,
    tagsViewDraggable,
    tagsViewCloseByMouseWheel,
    tagsViewScrollByMouseWheel,
    tagsViewChromeStyle,
    tagsViewIcon,
    tagsViewInNavbar,
    sidebarWidth,
    sidebarLogo,
    layout,
    themeColor,
    textEnhance,
    navbarOtherSettings,
    sidebarColorScheme,
    theme,
    isDark,
    borderRadius,
    watermarkEnabled,
    watermarkContent,
    grayMode,
    invertMode,
    showBreadcrumb,
    showBreadcrumbIcon,
    showHomeBreadcrumb,
    changeSetting,
    changeTheme,
    changeThemeColor,
    changeLayout,
    changeSidebarColorScheme,
  };
});
